<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
        听写
            1 圆角:border-radius
            2 过渡  transition
            3 旋转 rotate
            4 缩放 scale
            5 位移 translate 
            6 盒子阴影  box-shadow:inset 
            7 颜色透明的写法  rgba()
            8 overflow:visible / hidden / scroll / auto
            9 position:fixed
            10 脱离文档流，改变元素的特征(块级标签宽度不再继承，行内元素也可以支持宽高等属性)
            11 转化块级元素  display:block

        transform  保留原有的位置，然后脱离文档流完成动画

        nth-child , nth-of-type

        元素分类

        display:block / inline-block / inline

        未知宽度的居中
            ul {text-align:center ; font-size:0;}
            li {display:inline-block;}

        固定定位
            position:fixed 
            辅助属性  left / right / top / bottom
            定位的特征
            定位居中
                left:50%;top:50%;transform:translate(-50%,-50%);
                left:0;right:0;top:0;bottom:0;margin:auto;

     -->
    
</body>
</html>